<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title></title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<style>
			body,
			html {
				padding: 0;
				margin: 0;
				font-size: 15px;
			}
			
			.list {
				height: 50px;
				border-bottom: 1px solid #EAEAEA;
				background-color: white;
				font-size: 17px;
			}
			
			.name_p {
				width: 100px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 30px;
			}
			
			.continue {
				border-radius: 20px;
				background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
				width: 100%;
				float: right;
				margin-right: 20px;
			}
		</style>
	</head>

	<body>

		<div style="width: 100%;height: 80px;background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);">
			<table style="height: 45px;width: 100%;position: fixed;z-index: 9999;">

				<td style="width: 45px;float: left;">
					<a href="javascript:history.back(-1);" style="color: white;">
						<img src="../icon/back_white.png" style=" height: 35px;margin-top: 5px;margin-left: 5px;" />
					</a>
				</td>
				<td align="center">
					<img src="../icon/send_tea.png" style="height: 35px;margin-top: 5px;" />
				</td>
				<td style="width: 45px;float: right;">
				</td>

			</table>
			<div style="height: 26px;width: 100%;"></div>
			<table style="width: 100%;color: white;">
				<td id="click_unpay" style="width: 30%;height: 10px;" align="center">
					<p style="height:20px;">待付款</p>
				</td>
				<td id="click_pay" style="width: 30%;height:10px; " align="center">
					<p style="height:20px;">已付款</p>
				</td>

			</table>
		</div>
		<div id="tab" style="margin-top: 10px;">

			<table id="unpay">
			</table>

			<table id="pay" style="display: none;">
			</table>
		</div>
	</body>
	<script>
		var mine = JSON.parse(localStorage.getItem("users"));
		var click_pay = sessionStorage.getItem("click_pay");
		if(click_pay == "0") {
			$("#click_unpay").css("box-shadow", "2px -10px  8px -7px  #ffffff inset");
		}
		if(click_pay == "1") {
			$("#click_unpay").css("box-shadow", "");
			$("#click_pay").css("box-shadow", "2px -10px  8px -7px  #89f7fe inset");
			$("#pay").css("display", "block");
			$("#unpay").css("display", "none");
		}
		get_unpay_list(0);
		get_pay_list(0);

		$(function() {
			$("#click_unpay").bind("click", function() {
				sessionStorage.setItem("click_pay", "0");
				$("#click_pay").css("box-shadow", "");
				$("#click_unpay").css("box-shadow", "2px -10px  8px -7px  #ffffff inset");
				$("#pay").css("display", "none");
				$("#unpay").css("display", "block");
			})
			$("#click_pay").bind("click", function() {
				sessionStorage.setItem("click_pay", "1");
				$("#click_unpay").css("box-shadow", "");
				$("#click_pay").css("box-shadow", "2px -10px  8px -7px  #89f7fe inset");
				$("#pay").css("display", "block");
				$("#unpay").css("display", "none");
			})
		})

		function get_unpay_list(offset) {
			$.ajax({
				url: "http://www.xxxx.com/api/teas/" + mine.wx_openid + "?type=unpay&offset=" + offset,
				type: "get",
				async: false,
				success: function(res) {

					for(var i = 0; i < res.length; i++) {
						$.ajax({
							type: "get",
							url: "http://www.xxxx.com/api/teas/" + res[i].id + "?type=main",
							async: false,
							success: function(main_res) {
								sessionStorage.setItem(main_res.id, JSON.stringify(main_res));
								$.ajax({
									type: "get",
									contentType: "application/json",
									url: "http://www.xxxx.com/api/users/" + main_res.receive_openid + "?type=main",
									async: false,
									success: function(re_res) {
										sessionStorage.setItem(main_res.receive_openid, JSON.stringify(re_res));
										var tr1 = "<tr class='list' style='width=100%;margin-top:15px'>";
										var td1 = "<td style='width: 15%;float:left;' id='td1" + main_res.receive_openid + "' onclick='information(this.id)'><img src='" + re_res.user_headimgurl + "' style='width: 100%;margin-left: 20px;border-radius: 50%;' /></td>";
										var td2 = "<td style='width: 30%;float:left;' id='td2" + main_res.receive_openid + "' onclick='information(this.id)'><p class='name_p'>" + re_res.user_name + "</p></td>"
										var td3 = "<td style='width: 20%' ><img src='../icon/continue.png' id='" + main_res.id + "' onclick='pay(this.id)' class='continue' /></td>";
										var tr2 = "</tr>";
										$("#unpay").append(tr1 + td1 + td2 + td3 + tr2);
									},
								});

							}
						});
					}
				}
			})
		}

		function get_pay_list(offset) {
			$.ajax({
				url: "http://www.xxxx.com/api/teas/" + mine.wx_openid + "?type=sendlist&offset=" + offset,
				type: "get",
				async: false,
				success: function(res) {
					for(var i = 0; i < res.length; i++) {
						$.ajax({
							type: "get",
							url: "http://www.xxxx.com/api/teas/" + res[i].id + "?type=main",
							async: false,
							success: function(main_res) {
								sessionStorage.setItem(main_res.id, JSON.stringify(main_res));
								$.ajax({
									type: "get",
									contentType: "application/json",
									url: "http://www.xxxx.com/api/users/" + main_res.receive_openid + "?type=main",
									async: false,
									success: function(re_res) {
										sessionStorage.setItem(main_res.receive_openid, JSON.stringify(re_res));
										var tr1 = "<tr class='list' style='width=100%;margin-top:15px'>";
										var td1 = "<td style='width: 15%;float:left;' id='td1" + main_res.receive_openid + "' onclick='information(this.id)'><img src='" + re_res.user_headimgurl + "' style='width: 100%;margin-left: 20px;border-radius: 50%;' /></td>";
										var td2 = "<td style='width: 30%;float:left;' id='td2" + main_res.receive_openid + "' onclick='information(this.id)'><p class='name_p'>" + re_res.user_name + "</p></td>"
										var td3 = "<td style='width: 20%' ><img src='../icon/check_status.png' id='" + main_res.id + "' onclick='check(this.id)' class='continue' /></td>";
										var tr2 = "</tr>";
										$("#pay").append(tr1 + td1 + td2 + td3 + tr2);
									},
								});

							}
						});
					}
				}
			})
		}

		function information(id) {
			id = id.substring(3, id.length);
			location.href = "../center/information.html?openid=" + id;
		}

		function pay(id) {
			location.href = "../pay/continue_pay.html?teaid=" + id;
		}

		function check(id) {
			location.href = "check_status.html?teaid=" + id;
		}
	</script>

</html>